<template>
<p v-if="age < 5">婴儿</p>
<p v-else-if="age < 18">少年</p>
<p v-else-if="age < 30">青年</p>
<p v-else-if="age < 60">中年</p>
<p v-else>老年</p>
<hr>
<p v-if="age < 5">婴儿</p>
<p v-if="age < 18">少年</p>
<p v-if="age < 30">青年</p>
<p v-if="age < 60">中年</p>
<p v-if="age >= 60">老年</p>
<hr>

<p v-show="flag">第一个段落</p>
<!-- 
    当值为false时,没有显示该元素
    但是页面依然渲染了这个元素,只是设置了display值为none,隐藏了该元素
-->
<p v-show="!flag">第二个段落</p>
<hr>
<p v-if="flag">第一个段落</p>
<!-- 
    当使用v-if时,如果值为false,就不会渲染这个元素
-->
<p v-if="!flag">第二个段落</p>

</template>
<script setup>
import { ref } from 'vue';
const age = ref(18)
const flag = ref(true)
</script>